<template>
  <div>
    <el-dialog v-dialogDrag class="transferDialog tiny-mce-dialog" :close-on-press-escape = "true" :show-close = 'false' center :modal="false" title="详情" width="900px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
      <vue-scroll >
      <el-form :inline="true" :model="orderInfo" class="demo-form-inline" size="mini">
      <el-card class="box-card">
        <div slot="header">
          <span>车辆信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="车牌号" :label-width="formLabelWidth" prop="carOwnerNum">
              <el-input v-model="orderInfo.carOwnerNum" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="司机" :label-width="formLabelWidth" prop="carname">
              <el-input v-model="orderInfo.carname" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="carphone">
              <el-input v-model="orderInfo.carphone" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>货物信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="货物名称" :label-width="formLabelWidth" prop="name">
              <el-input v-model="orderInfo.name" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="数量" :label-width="formLabelWidth" prop="number">
              <el-input v-model="orderInfo.number" readonly>
                <template slot="append">吨</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" >
            <el-form-item label="运价" :label-width="formLabelWidth" prop="freight" >

              <el-input v-model="orderInfo.freight" readonly>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" style="float: right">
            <el-form-item label="总价" :label-width="formLabelWidth" prop="mineSendNum">
              <div style="color: #FFBA00;size: 16px">{{orderInfo.number * orderInfo.freight}}元</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>费用信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="信息费" :label-width="formLabelWidth" prop="infoFee">
              <el-input v-model="orderInfo.infoFee" readonly>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="装货费" :label-width="formLabelWidth" prop="loadFee">
              <el-input v-model="orderInfo.loadFee" readonly>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卸货费" :label-width="formLabelWidth" prop="unloadFee">
              <el-input v-model="orderInfo.unloadFee" readonly>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="磅费" :label-width="formLabelWidth" prop="poundsFee">
              <el-input v-model="orderInfo.poundsFee" readonly>
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="其他" :label-width="formLabelWidth" prop="otherFee">
              <el-input v-model="orderInfo.otherFee" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>货运信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="最低载重" :label-width="formLabelWidth" prop="lowWeight">
              <el-input v-model="orderInfo.lowWeight" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆类型" :label-width="formLabelWidth" prop="vehicleTypeName">
              <el-input v-model="orderInfo.vehicleTypeName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆长度" :label-width="formLabelWidth" prop="vehicleLengthName">
              <el-input v-model="orderInfo.vehicleLengthName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="共需车辆" :label-width="formLabelWidth" prop="needCar">
              <el-input v-model="orderInfo.needCar" readonly>
              </el-input>
            </el-form-item>
          </el-col>
<!--          <el-col :span="8">
            <el-form-item label="接单时间" :label-width="formLabelWidth" prop="transportStartTime">
              <el-input v-model="orderInfo.transportStartTime" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="完成时间" :label-width="formLabelWidth" prop="transportEndTime">
              <el-input v-model="orderInfo.transportEndTime" readonly>
              </el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="运单号" :label-width="formLabelWidth" prop="transportTakeNo">
              <el-input v-model="orderInfo.transportTakeNo" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
              <el-input v-model="orderInfo.remark" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header">
          <span>收款人信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="收款人" :label-width="formLabelWidth" prop="gatheringUserName">
              <el-input v-model="orderInfo.gatheringUserName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <!--<el-col :span="8">
            <el-form-item label="车牌号" :label-width="formLabelWidth" prop="mineSendNum">
              <el-input v-model="orderInfo.mineSendNum" readonly>
              </el-input>
            </el-form-item>
          </el-col>-->
          <el-col :span="8">
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="gatheringUserPhone">
              <el-input v-model="orderInfo.gatheringUserPhone" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="供应商" :label-width="formLabelWidth" prop="merchantName">
              <el-input v-model="orderInfo.merchantName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发货人" :label-width="formLabelWidth" prop="shipUserName">
              <el-input v-model="orderInfo.shipUserName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="shipUserPhone">
              <el-input v-model="orderInfo.shipUserPhone" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="发货地址" :label-width="formLabelWidth" prop="shipDetailAddress">
              <el-input v-model="orderInfo.shipDetailAddress" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="采购商" :label-width="formLabelWidth" prop="receiveMerchant">
              <el-input v-model="orderInfo.receiveMerchant" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人" :label-width="formLabelWidth" prop="receiveName">
              <el-input v-model="orderInfo.receiveName" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话" :label-width="formLabelWidth" prop="receivePhone">
              <el-input v-model="orderInfo.receivePhone" readonly>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="收货地址" :label-width="formLabelWidth" prop="receiveDetailAddress">
              <el-input v-model="orderInfo.receiveDetailAddress" readonly>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      </el-form>
      </vue-scroll>
      <div slot="footer" style="text-align:right" class="dialog-footer">
        <el-button type="info" size="mini" @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MyImg from '@/components/img/img'
export default {
  name: 'DriverStaff',
  props: ['showFormPanel', 'item'],
  data () {
    return {
      activeName: '1',
      data: [],
      phone: null,
      matchData: {},
      total: {},
      orderInfo: this.item,
      options: [],
      showOperation:false,
      formLabelWidth: '60px',
      fullscreenLoading: false,
      customVal: {imgName: ''},
      showTreeDialog: false,
      selectOrgExpandAll: false,
      ruleForm: this.item,
      roleOptions: [],
      isShow: this.showFormPanel
    }
  },
  filters: {
    formatStatus: function (val) {
      if (val === 'LOCK') {
        return false
      } else if (val === 'NORMAL') {
        return true
      }
      return '-'
    }
  },
  methods: {
    toQueryInfo() {
      let self = this
      let par = {
        id: self.item.transportTakeCarriageId
      }
      self.$http.post("/api/orderManages/ownerDetil", par).then(function(value) {
        if (value.ok){
          self.orderInfo = value.data
        }
      })
    },
    handleClick(){
      this.toQueryInfo()
    },
    selectVehicleType (val) {
      if (!val){
        this.ruleForm.typeName = null
        return
      }
      let obj = {}
      obj = this.vehicleTypes.find((item) => {
        return item.id === val
      })
      this.ruleForm.typeName = obj.name
    },
    refuseBtnClick (val) {
      let self = this
      val.transportTakeOrderId = self.item.transportTakeOrderId
      self.$http.post('/api/orderManages/allotSave', val)
          .then(function (res) {
            self.fullscreenLoading = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    refuseBtnClick1 (val) {
      let self = this
      val.transportTakeOrderId = self.item.transportTakeOrderId
      self.$http.post('/api/orderManages/allotUpdate', val)
          .then(function (res) {
            self.fullscreenLoading = false
            self.cancel()
            self.$emit('refreshList')
          }).catch(function (error) {
            self.fullscreenLoading = false
            console.log(error)
      })
    },
    cancel (){
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    }
  },
  mounted: function () {
    this.toQueryInfo()
  },
  components: {
    MyImg
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 15px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
